<!-- 角色 -->
<template>
    <div class="roleList-wrapper" v-show="!limitListVisible" >
        <!-- {{ limitListVisible }} -->
        <div class="safelist-search-container mb-16">
            <a-row class="search-row">
                <a-col :span="6" class="mr-8">
                    <a-input v-model:value="state.searchData.likeName" placeholder="请输入角色名称" />
                </a-col>
                <a-col :span="6">
                    <a-button type="primary" class="mr-8" @click="handleSearch">搜索</a-button>
                    <a-button type="primary" ghost @click="handleEmpty">重置</a-button>
                </a-col>
            </a-row>
            <a-row>
                <a-button type="primary" class="nmc-add-btn-primary" @click="addRole(1)">新增</a-button>
            </a-row>
        </div>
        <div class="safelist-table-container">
            <a-table :columns="tableProps.columns" :data-source="tableProps.dataSource"
                :pagination="tableProps.pagination" :scroll="{ y: 'calc(100vh - 320px)' }">
                <template #bodyCell="{ column, record }">
                    <template v-if="column.dataIndex == 'action'">
                        <a style="margin-right: 8px;" @click='addRole(2, record)'>编辑</a>
                        <a style="margin-right: 8px;" @click='toConfig(record)'>权限</a>
                        <a style="color: #f00;" @click='getRoleDelete(record)'>删除</a>
                    </template>
                </template>
            </a-table>
        </div>

        <!-- 新增/编辑角色弹窗 -->
        <CommonModal v-model="state.addRoleVisible" danger @handleOk="addRoleOk" @handleCancel="addRoleCancel"
            :title="state.addRoleTitle">
            <a-form ref="addRoleRef" :model="state.addRoleFormState" :name="state.addRoleFormTitle"
                :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }" :rules="state.addRoleRules">
                <a-form-item style="margin-bottom:0;" label="角色名称" name="name" has-feedback :colon="false">
                    <a-input v-model:value="state.addRoleFormState.name" autocomplete="off" placeholder="请输入角色名称"
                        show-count :maxlength="15" />
                </a-form-item>
                <a-form-item style="margin-bottom:0;" label="备注" name="description" has-feedback :colon="false">
                    <a-textarea style="height: 200px;" v-model:value="state.addRoleFormState.description" show-count
                        :maxlength="50" />
                </a-form-item>
            </a-form>
        </CommonModal>

        <!-- 删除角色弹窗 -->
        <CommonModal v-model="state.delRoleVisible" danger @handleOk="delRoleOk" @handleCancel="delRoleCancel"
            title="删除角色">
            <div style="text-align: center;">您是否要删除当前角色？</div>
        </CommonModal>
       
    </div>
     <limitList ref="limitListRef" v-show="limitListVisible" @close="closeLimitList"/>
</template>

<script>
import { onMounted, reactive, ref, unref } from 'vue'
import { sysRoleQueryPage, sysRoleAdd, sysRoleUpdate, sysRoleDelete } from '@/service/api'
import { useRouter } from 'vue-router';
// import { treeDataFormat } from "@/utils";
import { message } from "ant-design-vue";
import limitList from '../limitList/index.vue';

export default {
    components: {
        limitList
    },
    setup() {

        const router = useRouter();
        const tableProps = ref({
            columns: [{
                title: '序号',
                dataIndex: 'index',
                width: 70,
                customRender: ({ text, record, index, column }) => {
                    // return `${index + 1}`
                    return (tableProps.value.pagination.current - 1) * tableProps.value.pagination.pageSize + Number(index) + 1;
                }
            },
            {
                title: '角色名称',
                dataIndex: 'name'
            },
            {
                title: '成员数量',
                dataIndex: ''
            },
            {
                title: '角色描述',
                dataIndex: 'description'
            },
            {
                title: '更新时间',
                dataIndex: 'updateTime'
            },
            {
                title: '操作',
                dataIndex: 'action',
                align: "center",
            }
            ],
            dataSource: [], //列表数据
            pagination: {
                current: 1,//当前页数
                pageSize: 20,//每页条数
                total: 0,
                showSizeChanger: true,
                showTotal: (total) => `共有${total}条数据`,
                onChange: (current, pageSize) => {
                    tableProps.value.pagination.current = current;
                    tableProps.value.pagination.pageSize = pageSize;
                    getRolePage();
                }
            }
        })
        const limitListRef = ref()
        const limitListVisible = ref(false)
        const state = reactive({
            // tableHeight:0,
            searchData: {
                name: null
            },//搜索数据
            delRoleVisible: false, // 删除角色弹窗 显隐
            addFlag: 1, // 1 新增 2 修改
            addRoleVisible: false,  // 新增/编辑角色弹窗 显隐
            addRoleTitle: '新增角色',
            addRoleFormState: {
                id: '',
                name: '',
                description: '',
            },
            addRoleRules: {
                name: [{ required: true, message: '请填写角色名称!' }],
            }

        })
        const addRoleRef = ref()

        onMounted(() => {
            getRolePage()
            // state.tableHeight = document.getElementsByClassName('safelist-table-container')[0].offsetHeight - 80
        })
        //获取列表数据
        const getRolePage = () => {
            let params = {
                likeName: state.searchData.likeName,
                pageNum: tableProps.value.pagination.current,
                pageSize: tableProps.value.pagination.pageSize,
            }
            sysRoleQueryPage(params).then(res => {
                if (res.result) {
                    tableProps.value.dataSource = res.result.list;
                    tableProps.value.pagination.total = Number(res.result.total)
                }
            })

        }
        //搜索
        const handleSearch = () => {
            tableProps.value.pagination.current = 1
            getRolePage()
        }
        //重置
        const handleEmpty = () => {
            state.searchData = {
                name: null
            }
            tableProps.value.pagination.current = 1
            tableProps.value.pagination.pageSize = 10
            getRolePage()
        }

        //点击 新增/修改角色
        const addRole = (flag, record) => {
            console.log('record', record)
            state.addRoleVisible = true
            state.addFlag = flag
            if (state.addFlag == 2) {
                state.addRoleTitle = '修改角色'
                state.addRoleFormState.id = record.id
                state.addRoleFormState.name = record.name
                state.addRoleFormState.description = record.description
            } else {
                state.addRoleTitle = '新增角色'
            }
        }

        // 新增/修改角色 取消
        const addRoleCancel = () => {
            state.addRoleVisible = false
            const form = unref(addRoleRef)
            form.resetFields();
            state.addRoleFormState.id = ''
            state.addRoleFormState.name = ''
            state.addRoleFormState.description = ''
        }

        // 新增/修改角色 确定
        const addRoleOk = () => {
            const form = unref(addRoleRef)
            form.validate().then(res => {
                if (res) {
                    if (state.addFlag == 1) {
                        getRoleAdd() // 新增
                    } else {
                        getRoleEdit() // 修改
                    }
                }
            }).catch((e) => {
                console.log('error submit!!', e)
            })
        }

        // 新增角色
        const getRoleAdd = () => {
            sysRoleAdd({
                name: state.addRoleFormState.name,
                description: state.addRoleFormState.description,
            }).then(res => {
                if (res.result) {
                    message.success('添加角色成功!')
                    addRoleCancel()
                    getRolePage()
                }
            })
        }

        // 修改角色
        const getRoleEdit = () => {
            sysRoleUpdate({
                id: state.addRoleFormState.id,
                name: state.addRoleFormState.name,
                description: state.addRoleFormState.description,
            }).then(res => {
                if (res.result) {
                    message.success('添加角色成功!')
                    addRoleCancel()
                    getRolePage()
                }
            })
        }

        // 点击 删除
        const getRoleDelete = (record) => {
            state.delRoleVisible = true
            state.addRoleFormState.id = record.id
        }

        // 角色删除 取消
        const delRoleCancel = () => {
            state.delRoleVisible = false
        }

        // 角色删除 确定
        const delRoleOk = () => {

            sysRoleDelete({
                id: state.addRoleFormState.id
            }).then(res => {
                if (res.status == "000_0000_0000") {
                    message.success('角色删除成功!')
                    delRoleCancel()
                    getRolePage()
                } else {
                    // message.warning(res.errorInfo.slice(10))
                }
            })
        }

        // 跳转
        const toConfig = (record) => {
            // console.log('record', record)
            // router.push({
            //     name: 'limitList',
            //     query: {
            //         roleId: record.id,
            //         name: record.name,
            //     },
            // })


            limitListRef.value.loadEditData({
                roleId: record.id,
                name: record.name,
            })
            limitListVisible.value = true
        }
        const closeLimitList = () => {
            limitListVisible.value = false
        }
        return {
            state,
            tableProps,
            addRoleRef,
            router,
            limitListRef,
            limitListVisible,
            closeLimitList,
            getRolePage,
            handleSearch,
            handleEmpty,
            addRole,
            addRoleCancel,
            addRoleOk,
            getRoleAdd,
            getRoleEdit,
            getRoleDelete,
            delRoleCancel,
            delRoleOk,
            toConfig
        }
    },
}
</script>
<style lang="less" scoped>
.roleList-wrapper {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.safelist-table-container {
    height: calc(100% - 48px);
    overflow: hidden;
}
</style>
